<template>
  <div>
    <ImportExcelVue @ImportExcelSuccess="handlerImportExcelVue" />

    <el-card>

      <el-form>
        <el-form-item label="表名">
          <el-input v-model.trim="tableName"></el-input>
        </el-form-item>
        <template v-for="(item, index) in dataKeys">
          <el-form-item :label="item" :key="index">
            <el-input v-model.trim="form[item]"></el-input>
          </el-form-item>
        </template>

      </el-form>

    </el-card>
    <textarea :value="sql" cols="130" rows="100"></textarea>

  </div>
</template>

<script>
import ImportExcelVue from '@/base-ui/excel/ImportExcel.vue';
export default {
  components: { ImportExcelVue },
  data() {
    return {
      list: [],
      dataKeys: [],
      form: {},
      sql: "",
      tableName: "t_goods"

    }
  },
  watch: {
    form: {
      deep: true,
      handler(n) {
        this.init(n)
      }
    },
    tableName: {
      deep: true,
      handler(n) {
        this.init(this.form)
      }
    }
  },
  methods: {
    handlerImportExcelVue(data) {
      this.list = data[0].Sheet1
      // ['商品名称']
      this.dataKeys = Object.keys(this.list[0])
      this.dataKeys.forEach(item => {
        // { '商品名称':goods_name }
        this.$set(this.form, item, "")
      })
      console.log(this.list);

    },
    init(n) {
      let sql = ""
      this.list.forEach(item => {
        let params = []
        let values = ""
        Object.keys(item).forEach((key) => {
          if (n[key]) {
            params.push(n[key])
            if (key == '付款人数') {
              let temp = Math.floor(item[key].replace(/[^0-9]/ig, ''))
              console.log(item[key]);
              if (item[key].includes('万')) {

                values += `"${temp * 10000}",`
              } else {
                values += `"${temp}",`
              }

            } else {
              values += `"${item[key]}",`
            }
          }
        })
        values = values.slice(0, -1)
        sql += `insert into ${this.tableName} (${params.join(",")}) VALUES(${values});`

      })
      this.sql = sql

    }

  }
}
</script>

<style lang="less" scoped>

</style>
